import React from 'react';
import ReactDOM from 'react-dom';
import {createHashHistory} from 'history';
import {Router, Route, useRouterHistory} from 'react-router'
import {syncHistoryWithStore, RouterStore} from 'mobx-react-router';
import {Provider} from 'mobx-react';

import QYS from "./index" //umd

const routing = new RouterStore();

const allStore = {
    routing,
    ...QYS.store,
}

const WpRoute = QYS.Route;

const browserHistory = useRouterHistory(createHashHistory)({
    queryKey: '_key',
    basename: '/'
});

const history = syncHistoryWithStore(browserHistory, allStore.routing);

class Home extends React.Component {
    render() {
        return this.props.children;
    }
}

class Root extends React.Component {
    render() {
        return (
            <Provider {...allStore}>
                <Router history={history}>
                    <Route name="main" breadcrumbName="入口" path="/main" component={Home}>
                        {WpRoute}
                    </Route>
                </Router>
            </Provider>
        )
    }
}

ReactDOM.render(<Root/>, document.getElementById('container'));